<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    img{
        width: 300px;
        height: 300px;
    }
    .price{
        color: red;
        font-weight: 700;
    }
    #main div{
        float: left;
    }
    .kind{
        margin-left: 20px;
    }
</style>
<body>
    <div id="main">
        <app :kind="kind"></app>
    </div>
</body>
<script>
    let bottom1 = Vue.extend({
        props:['jsona','bool'],
        template:'<div v-if="bool"><p><img :src="jsona.kind1.img"></p><p>商品名:{{jsona.kind1.name}}</p><p class="price">价格:￥{{jsona.kind1.price}}</p></div>'
    })

    let top1 = Vue.extend({
        props:['json1'],
        data:function(){
            return {
                bool:false
            }
        },
        template:'<div @click="elec_click()" class="kind">{{json1.electric}}<p><bottom1 :bool="bool" :jsona="json1"></bottom1></p></div>',
        components:{
            bottom1:bottom1
        },
        methods:{
            elec_click:function(){
                this.bool=!this.bool
            }
        }
    })
    let bottom2 = Vue.extend({
        props:['jsonb','bool'],
        template:'<div v-if="bool"><p><img :src="jsonb.kind2.img"></p><p>商品名:{{jsonb.kind2.name}}</p><p class="price">价格:￥{{jsonb.kind2.price}}</p></div>'
    })
    let top2 = Vue.extend({
        props:['json2'],
        data:function(){
            return{
                bool:false
            }
        },
        template:'<div @click="elec_click()" class="kind">{{json2.live}}<p><bottom2 :bool="bool" :jsonb="json2"></bottom2></p></div>',
        components:{
            bottom2:bottom2
        },
        methods:{
            elec_click:function(){
                this.bool=!this.bool
            }
        }
    })
    let app = Vue.extend({
        props:['kind'],
        template:'<div><top1 :json1="kind"></top1><top2 :json2="kind"></top2></div>',
        components:{
            top1:top1,
            top2:top2,
        }
    })
    let vm = new Vue({
        el:'#main',
        data:{
            kind:{
                electric:'电子类',
                live:'生活用品类',
                kind1:{
                    name:"菠萝手机",
                    img:'./img/phone.jpg',
                    price:3600
                },
                kind2:{
                    name:'防毒面罩',
                    img:'./img/mask.jpg',
                    price:39.9
                }
            }
        },
        components:{
            app
        }
    })
</script>
</html>